<template>
  <div class="box">
    <div class="header">账户设置</div>
    <div class="main">
      <!-- 个人信息(未登录时) -->
      <div class="message" v-if="flag">
        <van-image
          round
          width=".9rem"
          height=".9rem"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <div class="message1">登录/注册</div>
      </div>
      <!-- 个人信息（已登录） -->
      <div class="message" v-else @click="mass">
        <van-image
          round
          width=".9rem"
          height=".9rem"
          src="https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/03087bf40ad162d9a08299ee14dfa9ec8b13cdd0.jpg"
        />
        <div class="message1">{{ userid }}</div>
      </div>
      <!-- 收藏，足迹等 -->
      <div class="top15">
        <van-grid>
          <van-grid-item icon="star-o" text="收藏" />
          <van-grid-item icon="passed" text="订阅店铺" />
          <van-grid-item icon="clock-o" text="足迹" />
          <van-grid-item icon="gold-coin-o" text="优惠" />
        </van-grid>
      </div>
      <!-- 我的订单 -->
      <div class="top15">
        <h5>我的订单</h5>
        <van-grid :column-num="5">
          <van-grid-item icon="balance-pay" text="待付款" />
          <van-grid-item icon="gift-card-o" text="代发货" />
          <van-grid-item icon="logistics" text="待收货" />
          <van-grid-item icon="records" text="待评价" />
          <van-grid-item icon="replay" text="退款/售后" />
        </van-grid>
      </div>
      <!-- 其他 -->
      <div class="top15">
        <van-grid>
          <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Image as VanImage, Cell, CellGroup, Grid, GridItem } from "vant";

Vue.use(VanImage);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Grid);
Vue.use(GridItem);
export default {
  name: "MyView",
  components: {},
  data() {
    return {
      userid: "",
      flag: true,
    };
  },
  computed: {},
  created() {
    this.userid = localStorage.getItem("userid");
    // 判断用户是否登录
    if (localStorage.getItem("token")) {
      this.flag = false;
    }
  },
  methods: {
    mass() {
      this.$router.push("/mymessage");
    },
  },
};
</script>

<style scoped>
.message {
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  background-color: white;
  padding: 0.15rem 0.25rem;
  border-radius: 0.25rem;
}
.message1 {
  padding-left: 0.25rem;
  font-size: 0.2rem;
}
.top15 {
  margin-top: 0.05rem;
}
h5 {
  background-color: white;
}
</style>